<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>添加节点</h1>
    <ul>
        <li>appendChild(node)：在内部末尾添加节点</li>
        <li>
            <h3>insertBefore(newNode,childNode)：在childNode之前添加newNode</h3>
            <ul>
                <li>第二个参数为null：相当于在末尾添加。</li>
                <li>第二个参数可以传父节点的firstChild：在父节点头部添加节点。</li>
            </ul>
        </li>
    </ul>
    <h1>删除节点</h1>
    <p>removeChild(childNode)：将指定子节点删除</p>
    <h2>作业</h2>
    <dl>
        <dt>必做：学生管理系统-添加&展示</dt>
        <dd>定义几个文本框，name,sex,tel</dd>
        <dd>点击添加按钮，将信息展示在表格中。</dd>
        <dt>必做：学生管理系统-删除</dt>
        <dd>每一行表格增加删除按钮</dd>
        <dd>点击删除按钮，将当前行删除。</dd>
        <dt>选做：学生管理系统-保存</dt>
        <dd>设计保存按钮</dd>
        <dd>点击保存按钮，使用html5本地存储技术，存储数据。</dd>
        <dd>每次打开页面，先加载保存的数据生成表格。</dd>
    </dl>
    <div class="div1"></div>
    填入：<input type="text" class="text">
    <button onclick="handleAppend()">末尾添加</button>
    <button onclick="handleInsert()">头部添加</button>
    <button onclick="handleRemove()">删除子节点</button>
    <button onclick="handleClone()">克隆头节点</button>
    <script>

        let div = document.querySelector(".div1");
        let input = document.querySelector(".text");

        function handleAppend() {
            let value = input.value;
            // 创建文本节点
            let textNode = document.createTextNode(value);

            // 创建元素节点
            let p = document.createElement("p");

            // 把文本节点添加到p标签中
            p.appendChild(textNode);
            // 把p标签添加到div标签中
            div.appendChild(p);
        }

        function handleInsert() {
            let value = input.value;
            // 创建文本节点
            let textNode = document.createTextNode(value);

            // 创建元素节点
            let p = document.createElement("p");

            // 把文本节点添加到p标签中
            p.appendChild(textNode);

            // 把p标签添加到div标签中
            div.insertBefore(p,div.firstChild);
        }

        function handleRemove() {
            // 删除第一个子节点
            div.removeChild(div.firstChild);
        }

        function handleClone() {
            // 克隆节点：true表示克隆内容
            let newNode = div.firstChild.cloneNode(true);
            console.log(newNode);
            div.appendChild(newNode);
        }
    </script>
</body>

</html>